<template>
  <div class="ensureMoneyRecord">
    <!--  顶部导航  -->
    <HeaderSimple
      page="userInformation"
      :title="title"
      @goBack="$router.go(-1)"
    ></HeaderSimple>

    <div class="totalMoney">
      <van-tabs v-model="active" class="totalMoney_top" title-active-color="#FF3B3E" line-height="4" line-width="30">
        <van-tab class="title">
          <div slot="title" >
            <span class="title_total">￥300.00</span>
            <p class="title_info">支付的保证金总</p>
          </div>
          <div class="content_card" v-for="(item, index) in payMoneyDetail" :key="index">
            <div class="goodsInfo_top">
              <span class="goodsInfo_grade">{{item.grade}}</span>
              <h3 class="goodsInfo_title">{{item.title}}</h3>
            </div>
            <p class="goodsInfo_info">{{item.info}}</p>
            <div class="content_card_detail">
              <span class="time">
                {{item.payTime}}
              </span>
              <em style="color: #4B5B8D;">{{item.method}}</em>
              该商品保证金
              <i style="color: #FF3B3E;">{{item.ensureMoney}} 元</i>
            </div>
          </div>
        </van-tab>
        <van-tab class="title">
          <div slot="title">
            <span class="title_total">￥300.00</span>
            <p class="title_info">退还的保证金总</p>
          </div>
          <div class="content_card" v-for="(item, index) in refundMoneyDetail" :key="index">
            <div class="goodsInfo_top">
              <span class="goodsInfo_grade">{{item.grade}}</span>
              <h3 class="goodsInfo_title">{{item.title}}</h3>
            </div>
            <p class="goodsInfo_info">{{item.info}}</p>
            <div class="content_card_detail">
              <span class="time">
                {{item.payTime}}
              </span>
              <em style="color: #4B5B8D;">{{item.method}}</em>
              该商品保证金
              <i style="color: #FF3B3E;">{{item.ensureMoney}} 元</i>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from "Vant";
import HeaderSimple from "@/components/HeaderSimple";
export default {
  name: "ensureMoneyRecord",
  components: {
    HeaderSimple
  },
  data() {
    return {
      active: 0,
      payMoneyDetail: [
        {
          grade: 'A2',
          title: '产品标题产品标题产品标题产品标题',
          info: '5300 11什么介绍什么介绍什么介绍什么介绍',
          payTime: '2018-7-1  12:00',
          ensureMoney: '100',
          method: '支付'
        },
        {
          grade: 'A2',
          title: '产品标题产品标题产品标题产品标题',
          info: '5300 11什么介绍什么介绍什么介绍什么介绍',
          payTime: '2018-7-1  12:00',
          ensureMoney: '100',
          method: '支付'
        },
      ],
      refundMoneyDetail: [
        {
          grade: 'A2',
          title: '产品标题产品标题产品标题产品标题',
          info: '5300 11什么介绍什么介绍什么介绍什么介绍',
          payTime: '2018-7-1  12:00',
          ensureMoney: '100',
          method: '退还'
        },
        {
          grade: 'A2',
          title: '产品标题产品标题产品标题产品标题',
          info: '5300 11什么介绍什么介绍什么介绍什么介绍',
          payTime: '2018-7-1  12:00',
          ensureMoney: '100',
          method: '退还'
        },
      ]
    };
  },
  created() {
    this.title = this.$route.meta.title;
  },
  methods: {
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.ensureMoneyRecord {
  width: 100%;
  .totalMoney {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    .totalMoney_top {
      height: 145px;
      padding: 0 30px;
      @{deep} .van-tabs__wrap {
        height: 100%;
      }
      @{deep} .van-tab {
        padding-top: 10px;
        line-height: 28px;
        .title_total {
          font-size:17px;
          font-family:PingFang SC;
          font-weight:bold;
          color:rgba(51,51,51,1);
        }
        .title_info {
          font-size:14px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
        }
      }
      /* 内容 */
      .content_card {
        width: 690px;
        height: 190px;
        margin-top: 30px;
        border-radius:9px;
        padding: 30px;
        background: rgba(255, 255, 255, 1);
        .goodsInfo_top {
          height: 42px;
          .goodsInfo_grade {
            float: left;
            width: 80px;
            height: 42px;
            text-align: center;
            line-height: 42px;
            border-radius: 21px;
            background-color: #ff3b3e;
            font-size: 24px;
            font-family: SourceHanSansCN;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
          .goodsInfo_title {
            float: left;
            font-size: 30px;
            line-height: 24px;
            margin-left: 19px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            line-height: 48px;
          }
        }
        .goodsInfo_info {
          margin-top: 14px;
          font-size:24px;
          font-family:SourceHanSansCN;
          font-weight:400;
          color:rgba(51,51,51,1);
        }
        .content_card_detail {
          margin-top: 26px;
          font-size:24px;
          font-family:PingFang SC;
          font-weight:500;
          color:rgba(136,136,136,1);
        }
      }
    }
  }
}
</style>
